<template>
  <audio :src="audioSrc" autoplay="autoplay" ref="audio" class="audioPlay" @ended="changeMusic"></audio>
</template>

<script setup lang='ts'>
import { ref, onMounted, defineProps, toRefs , watch  } from "vue"
import audioFile from '@/assets/music/2087766368.mp3'

const props = defineProps({
  playControl: {
    type: Boolean,
    default: false
  }
})

const audioSrc = ref(audioFile)
const { playControl } = toRefs(props)
const audio = ref(null)

watch(playControl,(newX)=>{
  if(!audio)return;
  newX ? audio.value?.play(): audio.value?.pause()
})

function plays() {
  if(!audio)return;
  playControl ? audio.value?.play(): audio.value?.pause()
}
function changeMusic(){
  // audio.value?.pause()
  // await this.getSongUrlData(val)
  //     if (this.isPlay && this.$refs.audio.paused) {
  //       this.$refs.audio.play()
  //     }
}
async function getSongUrlData(){

}
</script>

<style lang="scss" scoped>
.audioPlay{
  display: none;
  position: fixed;
  top: -100px;
  left: 0;
  overflow: hidden;
  visibility: hidden;
}
</style>
